<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
	xmlns:p="http://primefaces.org/ui"
>
	<ui:define name="description">
		<p>
			<code>&lt;o:validateOrder&gt;</code> validates if the values of the given <code>UIInput</code> components as specified in
			the <code>components</code> attribute are in the order as specified by the <code>type</code> attribute which accepts
			the following values:
		</p>
		<ul>
			<li><code>lt</code> (default): from least to greatest, without duplicates.</li>
			<li><code>lte</code>: from least to greatest, allowing duplicates (equal values next to each other).</li>
			<li><code>gt</code>: from greatest to least, without duplicates.</li>
			<li><code>gte</code>: from greatest to least, allowing duplicates (equal values next to each other).</li>
		</ul>
		<p>
			This validator has the additional requirement that the to-be-validated values must implement 
			<a href="http://docs.oracle.com/javase/7/docs/api/java/lang/Comparable.html"><code>Comparable</code></a>.
			Note that when this validator is placed <em>before</em> all of the components, then it will only compare the raw
			unconverted submitted string values, not the converted object values. If you need to compare by the converted
			object values, then you need to place this validator <em>after</em> all of the components, like as demonstrated
			in the second example with dates below.
		</p>
	</ui:define>

	<ui:define name="demo">
		<h:form>
			<h3>Please fill out the values of all those fields in order</h3>
			<o:validateOrder id="order" components="foo bar baz" />

			<h:panelGrid columns="3">
				<o:outputLabel for="foo" value="Foo" />
				<h:inputText id="foo" />
				<h:message for="foo" />

				<o:outputLabel for="bar" value="Bar" />
				<h:inputText id="bar" />
				<h:message for="bar" />

				<o:outputLabel for="baz" value="Baz" />
				<h:inputText id="baz" />
				<h:message for="baz" />

				<h:panelGroup />
				<h:commandButton value="submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:message for="order" />
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>

		<hr />
		
		<h:form>
			<h3>Please enter a valid start and end date in yyyy-MM-dd format</h3>

			<h:panelGrid columns="3">
				<h:outputLabel for="startDate" value="Start date" />
				<h:inputText id="startDate" required="true" requiredMessage="Please enter start date" 
					converterMessage="Date must be in format yyyy-MM-dd">
					<f:convertDateTime pattern="yyyy-MM-dd" />
				</h:inputText>
				<h:panelGroup>
					<h:message for="startDate" />
					<h:message for="order" />
				</h:panelGroup>
				
				<h:outputLabel for="endDate" value="End date" />
				<h:inputText id="endDate" required="true" requiredMessage="Please enter end date"  
					converterMessage="Date must be in format yyyy-MM-dd">
					<f:convertDateTime pattern="yyyy-MM-dd" />
				</h:inputText>
				<h:panelGroup>
					<h:message for="endDate" />
					<o:validateOrder id="order" type="lte" components="startDate endDate" 
						message="Start date may not be after end date" />
				</h:panelGroup>
		
				<h:panelGroup />
				<h:commandButton value="submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>

		<hr />

		<h:form>
			<h3>Please choose a valid start and end date in all rows (PrimeFaces example)</h3>

			<p:messages id="messages" />

			<p:dataTable binding="#{table}" value="#{of:createArray(3)}">
				<p:column headerText="#">
					##{table.rowIndex}
				</p:column>
				<p:column headerText="Start date">
					<p:calendar id="startDate" pattern="yyyy-MM-dd" required="true" 
						requiredMessage="Please enter start date ##{table.rowIndex}" />
				</p:column>
				<p:column headerText="End date">
					<p:calendar id="endDate" pattern="yyyy-MM-dd" required="true" 
						requiredMessage="Please enter end date ##{table.rowIndex}" />
					<o:validateOrder components="startDate endDate" 
						message="End date ##{table.rowIndex} must be after start date ##{table.rowIndex}" />
				</p:column>
			</p:dataTable>
			
			<p>
				<p:commandButton value="Submit" update="@form" />
			</p>
		</h:form>
	</ui:define>
</ui:composition>